<template>
  <div>
    <el-dialog v-model="isShowSKU"
               :before-close="handleClose"
               title="关联系统SKU"
               draggable
               width="1000px"
               append-to-body
    >

      <el-form :inline="true" :model="queryParams" label-width="80px" >
        <div style="display: flex;flex-wrap: wrap">
          <el-col :span="8">
            <el-form-item label="SKU编码">
              <el-input v-model="queryParams.erpSkuId" placeholder="SKU编码"  clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="店铺id">
              <el-input v-model="queryParams.erpShopId" placeholder="店铺id"  clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item >
              <el-button icon="Search" type="primary" @click="getList">查询</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </div>
      </el-form>

      <vxe-table
          ref="tableRef"
          border
          style="margin-top: 10px;"
          align="center"
          :data="tableList"
          height="300"
          :checkbox-config="{ trigger:'row'}"
          :row-config="{isCurrent: true, isHover: true}"
      >
        <vxe-column type="checkbox"  width="80" ></vxe-column>
        <vxe-column type="seq" width="80" title="序号"  ></vxe-column>
        <vxe-column field="erpShopId" title="店铺ID"></vxe-column>
        <vxe-column field="erpSkuId" title="SKU编码"></vxe-column>
        <vxe-column field="erpSkuName" title="商品名称"></vxe-column>
        <vxe-column field="link" width="200" title="渠道">
          <template #default="{row}">
            <template v-for="(item,index) in row.links" :key="index">
              <div>
                <el-link type="primary" :href="item" target="_blank">渠道{{index+1}}</el-link>
              </div>
            </template>
          </template>
        </vxe-column>
      </vxe-table>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="clickSelSKu"> 确定 </el-button>
          <el-button @click="handleClose">取消</el-button>
        </span>
      </template>

    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted} from "vue";
import {getSkuDetailListByErpSku} from "@/api/scApi";
const { proxy } = getCurrentInstance()

const props = defineProps({
  isShowSKU: {
    type: Boolean,
    default: false
  },
})

let queryParams=ref({})
let tableList =ref([])
const emits = defineEmits(['cancelSKU'])

function handleClose() {
  emits('cancelSKU')
}

function getList(){

  if(!queryParams.value.erpSkuId && !queryParams.value.erpShopId){
    proxy.$modal.msgWarning("查询条件不能为空")
    return
  }
  getSkuDetailListByErpSku(queryParams.value).then(res=>{
    if(res.code===200){
      tableList.value=res.data.map(item=>{
        item.links=item.link.split(",")
        return item
      })
    }
  })
}
function resetQuery() {
  queryParams.value={}
  tableList.value=[]
}

function clickSelSKu(){
  const $table = proxy.$refs.tableRef
  if ($table) {
    const selectRecords = $table.getCheckboxRecords()
    emits('cancelSKU',selectRecords)
  }
}

</script>

<style scoped lang="scss">

</style>